<template>
   <div class="body-content">
      <!--面包屑-->
      <crumbs-nav v-if="crumbsNav.length" :crumbs-nav="crumbsNav"></crumbs-nav>
      <!--商品导航-->
      <nav-selector v-if="navSelector.length"
                    :nav-selector="navSelector"
                    @selector = "_selector"
      >
      </nav-selector>
      <!--商品过滤-->
      <commodity-filtration @selector = "_selector">
      </commodity-filtration>
      <!--商品展示-->
      <section-box-common v-if="DetailsPageData.length"
                          :data-list="DetailsPageData"
                          :style-string="styleString"
      >
      </section-box-common>
      <div v-else-if="displayloading" class="waitfor-loading">
         <div>
            <img src="../../../static/loading-svg/loading-spin.svg" alt="">
         </div>
      </div>
      <div v-else-if="!DetailsPageData.length" class="no-data">
         <div>
            <div>
               <img src="https://store.res.meizu.com/search/img/panda-28eddf5190.png" alt="">
            </div>
            <div class="right">
               <p class="title">抱歉没有找到相关商品</p>
               <p>建议您:</p>
               <p>1.适当减少筛选条件</p>
               <p>2.尝试其他关键字</p>
            </div>
         </div>
      </div>
      <!--滚动加载-->
      <lazyload-componet v-if="DetailsPageData.length"
                         :commodity-display-data="DetailsPageData"
                         @lazyLoad="_lazyLoad"
                         ref="lazyloads"
      >
      </lazyload-componet>
   </div>
</template>

<script>
   import CrumbsNav from '../Crumbs-Nav/Crumbs-Nav'
   import NavSelector from '../Nav-selector/Nav-selector'
   import CommodityFiltration from '../Commodity_filtration/Commodity_filtration'
   import sectionBoxCommon from '../section-box-common/section-box-common'
   import LazyloadComponet from '../Lazyload-Componet/Lazyload-componet'
   import {mapGetters, mapMutations, mapActions} from 'vuex'

   export default {
      name: 'body-content-common',
      data() {
         return {
            CommodityDisplayData: null,
            oldlength: 0,
            newlength: 0,
            skip: 0,
            firstTime: true,
            RequestClosure: false,
            firstWatch: false,
            oldlength: 0,
            isselector: false
         }
      },
      computed: {
         ...mapGetters([
            'GET_WATERFALL_DATA',
            'closeLazyload',
            'displayloading',
            'DetailsPageData'
         ])
      },
      methods: {
         _lazyLoad() {
            if (this.firstTime) {
               this.skip = this.GET_WATERFALL_DATA.skip
               this.limit = this.GET_WATERFALL_DATA.limit
               this.lazyloads = this.$refs.lazyloads
               this.firstTime = false
            }
            if (this.isselector) {
               this.skip = this.GET_WATERFALL_DATA.skip
               this.limit = this.GET_WATERFALL_DATA.limit
               this.lazyloads = this.$refs.lazyloads
               this.isselector = false
            }
            this.skip++
            let skip = this.skip * this.limit
            this.setWATERFALL_DATA({skip})
            this.lazyloads.RequestOpen()
            console.log('执')
            this.getData({url: this.urlString})
         },
         _selector() {
            this.isselector = true
         },
         ...mapMutations({
            setWATERFALL_DATA: 'WaterfallData',
            setDisplayFooter: 'displayFooter'
         }),
         ...mapActions({
            getData: 'setData'
         }),
      },
      props: {
         crumbsNav: {
            type: Array,
            required: true,
            default() {
               return []
            }
         },
         navSelector: {
            type: Array,
            default() {
               return []
            }
         },
         styleString: {
            type: String,
            default() {
               return []
            }
         },
         urlString: {
            type: String,
            default() {
               return ''
            }
         }
      },
      components: {
         CrumbsNav,
         NavSelector,
         CommodityFiltration,
         sectionBoxCommon,
         LazyloadComponet
      },
      watch: {
         closeLazyload: {
            handler(newVal, oldVal) {
               if (newVal === true && this.DetailsPageData.length) {
                  this.lazyloads.RequestClose()
                  this.setDisplayFooter({isdisplay: true})
               }
            }
         },
         DetailsPageData: {
            handler(newVal, oldVal) {
            }
         }
      }
   }
</script>

<style scoped lang="stylus">
   .body-content
      margin 0 auto
      height auto
      width 1240px
   .no-data > div
      display flex
      justify-content center
      align-items center
      width 100%
      height 400px
      .right
         margin-left 30px
      .title
         color aqua
         font-size 20px
         margin-top -20px
         margin-bottom 20px
   .waitfor-loading
      display flex
      justify-content center
      align-items center
      width 100%
      height 400px
      div
         width 150px
         height 150px
</style>
